<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body ng-app="app">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div  style="height:400px">
    <div ng-controller="sexChart" style="height:1400px">
        <sexbar id="sexBarcharts" legend="legend"  data="data"></sexbar>
    </div>
</div>
<!-- ECharts单文件引入 -->
<!--<script src="G:/1115zhuomian/3banben/echarts.min.js"></script> -->
<script src="vendor/angular/angular.js"></script>
<script src="js/controllers/echarts.js"></script>

<script type="text/javascript">

    var app = angular.module('app', []);
    console.log("ceshi输出");


    app.controller('sexChart', function($scope) {
        $scope.legend = ["男", "女"];
        // $scope.item = ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        $scope.data = [
            {value:78, name:'男'},{value:56,name:'女'} //Berlin
        ];
    });

    app.directive('sexbar', function() {
        return {
            scope: {
                id: "@",
                legend: "=",
                //item: "=",
                data: "="
            },
            restrict: 'E',
            template: '<div style="height:400px;"></div>',
            replace: true,
            link: function($scope, element, attrs, controller) {
                var a = [];
                var option = {

                    title:{
                        text : '性别比例',//标题说明
                        x:'center'//居中
                    },
                    // 提示框，鼠标悬浮交互时的信息提示

                    tooltip: {
                        show: true,
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    // 图例
                    legend: {
                        x : 'center',
                        y : 'bottom',
                        data: $scope.legend
                    },

                    // 数据内容数组
                    series: [
                        {
                            name:'',
                            type: 'pie',
                            radius:"55%",
                            center:['50%','50%'],

                            label: {
                                normal: {
                                    position: 'inner' //内置文本标签
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },


                            data:$scope.data,


                            itemStyle : {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                } ,
                                emphasis: {
                                    label: {
                                        show: true,
                                        position: 'outer'
                                    },
                                    labelLine: {
                                        show: true,
                                        lineStyle: {
                                            color: 'red'
                                        },
                                    },
                                }
                            }
                        }

                    ]

                };
                var myChart = echarts.init(document.getElementById($scope.id),'macarons');
                myChart.setOption(option);
            }
        };
    });

</script>
</body>